<mat-dialog-content>

  <div class="container mat-typography" fxLayout="column">
    <h1>{{data.name}}</h1>

    <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="20px">
      <div fxFlex="noshrink">
        <h4 translate>LABEL_IMAGE</h4>
        <img class="img-thumbnail" [src]="'assets/public/images/products/'+data.image">
      </div>

      <div>
        <h4 translate>LABEL_PRICE</h4>
        <p>{{data.price}}</p>
      </div>

      <div>
        <h4 translate>LABEL_DESCRIPTION</h4>
        <div [innerHTML]="data.description"></div>
      </div>
    </div>

    <div>
      <h3 translate>LABEL_REVIEWS</h3>

      <blockquote *ngFor="let review of reviews$|async">
        <div fxLayout="row">
          <div>
            <cite>{{review.author}}</cite>
            <p>{{ review.message }}</p>
          </div>
          <div>
            <button mat-icon-button (click)="likeReview(review)" [disabled]="review.liked || !isLoggedIn()">
            <span class="fa-2x fa-layers fa-fw">
              <i class="fas fa-thumbs-up"></i>
              <span class="fa-layers-counter fa-layers-bottom-right accent-notification">{{ review.likesCount }}</span>
            </span>
            </button>
          </div>
        </div>
        <button class="review-button" color="secondary" mat-stroked-button
                *ngIf="review.author !== 'Anonymous' && review.author === author" (click)="editReview(review)"><i
          class="fas fa-user-edit"></i> {{'BTN_EDIT' | translate}}
        </button>
      </blockquote>

      <div>
        <mat-form-field appearance="outline">
           <textarea [formControl]="reviewControl" #textPut cols="50" matInput placeholder=""
                     matTextareaAutosize matAutosizeMinRows="2"
                     matAutosizeMaxRows="4"></textarea>
        </mat-form-field>

        <button id="submitButton" mat-raised-button color="primary" (click)="addReview(textPut)"><i
          class="fas fa-paper-plane fa-lg"></i> {{'BTN_SUBMIT' | translate}}
        </button>
      </div>
    </div>
  </div>

  <footer>
    <button mat-raised-button mat-dialog-close class="close-dialog"><i class="fas fa-arrow-circle-left fa-lg"></i> {{'BTN_CLOSE' | translate}}
    </button>
  </footer>
</mat-dialog-content>
